<script setup>

defineProps({
    header: {
        type: String,
        default: ''
    },
    body: {
        type: Object,
        default: {
            p_name: '默认名称',
            p_info: '默认内容',
            p_img: '',
            bind: false
        }
    },
    footer: {
        type: String,
        default: ''
    }
})

</script>
<template>
    <div class="homeCard">
        <el-card>
            <template #header>
                <div class="card-header">
                    <span>{{ header }}</span>
                </div>
            </template>
            <div class="card-body">
                <el-image :src="body.p_img" class="body_img" />
                <div class="body_desc">
                    <p>{{ body.p_name }}</p>
                    <p>{{ body.p_info }}</p>
                    <p>是否绑定设备：{{ body.bind ? '是' : '否' }}</p>
                </div>

            </div>
            <el-divider />
            <div class="card-footer">
                <span>{{ footer }}</span>
            </div>

        </el-card>
    </div>
</template>
<style scoped lang='scss'>
.homeCard {
    width: 45rem;
    margin: 0.5rem 0;

    .card-header {
        color: rgb(111, 197, 68);
        font-size: 1.5rem;
        font-weight: 700;
    }

    .card-body {
        color: #666;
        font-size: 1.2rem;
        display: flex;

        .body_desc {
            margin-left: 1rem;
            display: flex;
            flex-direction: column;
            justify-content: space-around;
            height: 100px
        }

        .body_img {
            width: 100px;
            height: 100px;
            border-radius: 6px
        }
    }

    .card-footer {
        color: #777;
        font-size: 1rem
    }
}
</style>